<template>
    <div class="login">
        <div class="login-header">
            <Language></Language>
        </div>
        <div class="login-container">
            <div class="login-container-top">
                <div class="logo">
                    <img src="@/assets/images/logo.fe4f63bf.png" alt="">
                </div>
                <p>Admin Plus 企业级中后台前端解决方案</p>
            </div>
            <Login @on-submit="handleSubmit">
                <UserName name="username" />
                <Password name="password" />
                <div class="demo-auto-login">
                    <Checkbox v-model="autoLogin" size="large">{{ $t('loginView.autologin') }}</Checkbox>
                    <a>{{ $t('loginView.wjmm') }}</a>
                </div>
                <Submit />
            </Login>
            <div class="other">
                <div class="other-login">
                    <span>{{ $t('loginView.otherlogin') }}</span>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" t="1547543886845"
                        class="icon" style="" viewBox="0 0 1024 1024" version="1.1" p-id="16941" width="400"
                        height="400">
                        <defs></defs>
                        <path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#18ACFC"
                            p-id="16942" />
                        <path
                            d="M500.113 228.39c118.396-1.518 178.924 61.004 201 156 3.497 15.048 0.15 34.807 0 50 27.142999999999997 5.682 33.087 60.106 10 75v1h1c8.26 14.329999999999998 19.04 28.125 26 44 7.332 16.723 9.305999999999997 35.16 14 55 4.024 17.01-2.287 51.505-10 57-0.7709999999999998 0.683-2.231 1.312-3 2-14.601-3.016-30.377-16.865-38-27-3.065-4.074-5.275-9.672-10-12-0.395 21.568-12.503 41.15-22 55-3.5139999999999993 5.123-14.073 13.216999999999999-14 18 3.690999999999999 2.836 8.305 2.955999999999999 13 5 10.513 4.577 25.449 13.168 32 22 2.333999999999999 3.146 5.548 7.554999999999999 7 11 16.193 38.414-36.527 48.314-63 54-27.185 5.839-77.818-10.224-92-19-8.749-5.414-16.863-18.573-29-19-3.666 2.3889999999999993-14.438 1.1319999999999997-20 1-16.829 32.804-101.913 47.867999999999995-148 31-14.061-5.146-43.398-17.695-38-40 4.437-18.327 19.947-29.224 35-37 5.759-2.975 18.915-4.419 22-10-13.141-8.988-24.521-28.659-31-44-3.412-8.077-4.193-25.775-9-32-7.789 12.245-32.097 36.91-52 33-3.071-4.553-7.213-9.097-9-15-4.792-15.835-1.81-40.379 2-54 8.117-29.02 16.965-50.62299999999998 32-72 4.672-6.643 11.425-12.135 16-19-8.945-9.733-6.951-37.535999999999994-1-49 4.002-7.709 9.701-7.413 10-20-1.9199999999999997-3.022-0.071-8.604-1-13-4.383-20.75 3.2729999999999997-47.552 9-63 19.8-53.420999999999985 53.712-90.466 105-112 11.986-5.033 25.833-7.783 39-11 5.322-1.3 11.969 0.518 16-2z"
                            fill="#FFFFFF" p-id="16943" />
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" t="1547543880869"
                        class="icon" style="" viewBox="0 0 1024 1024" version="1.1" p-id="16720" width="400"
                        height="400">
                        <defs></defs>
                        <path
                            d="M512 1024C229.228089 1024 0 794.771911 0 512S229.228089 0 512 0s512 229.228089 512 512-229.228089 512-512 512z m-87.813689-750.933333C314.1632 273.066667 221.866667 351.744 221.866667 444.7232c0 57.230222 31.9488 103.708444 78.085689 135.896178h3.549866l-21.2992 60.802844 74.5472-39.344355h3.549867c21.2992 10.729244 42.587022 14.301867 63.886222 14.301866h14.199467c-3.549867-14.301867-7.099733-28.603733-7.099734-42.9056 0-85.833956 81.635556-157.354667 184.570312-157.354666h7.099733C608.756622 337.442133 527.132444 273.066667 424.186311 273.066667z m370.676622 306.722133c0-78.654578-78.791111-143.018667-171.906844-143.018667-96.688356 0-171.895467 64.364089-171.895467 143.018667s78.791111 143.018667 171.895467 143.018667c17.908622 0 35.817244-3.584 53.725867-7.156623h3.572622l60.882489 32.176356-17.908623-53.623467c46.557867-28.603733 71.634489-67.925333 71.634489-114.414933z"
                            fill="#5FC948" p-id="16721" />
                        <path
                            d="M358.4 420.977778a28.444444 28.444444 0 1 1 0-56.888889 28.444444 28.444444 0 0 1 0 56.888889z m204.8 136.533333a28.444444 28.444444 0 1 1 0-56.888889 28.444444 28.444444 0 0 1 0 56.888889z m-68.266667-136.533333a28.444444 28.444444 0 1 1 0-56.888889 28.444444 28.444444 0 0 1 0 56.888889z m193.422223 136.533333a28.444444 28.444444 0 1 1 0-56.888889 28.444444 28.444444 0 0 1 0 56.888889z"
                            fill="#5FC948" p-id="16722" />
                    </svg>
                </div>
                <div class="regi">
                    <a href="/register">{{ $t('loginView.register') }}</a>
                </div>
            </div>

        </div>
        <div class="login-footer">
            <footer />
        </div>
    </div>
</template>


<script setup lang ='ts'>
import { ref, reactive, toRef,getCurrentInstance,type  ComponentInternalInstance } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import mainStore from '@/stores/main'
import footer from '@/components/footer.vue'
import Language from '@/components/language.vue'
import {setToken} from '@/utils/auth'
const {proxy} = getCurrentInstance() as ComponentInternalInstance 
const $route = useRoute()
const $router = useRouter()
const $store = mainStore()
type SubmitInfoType = {
    username: string
    password: string
}
const ruleInline = reactive({
    user: [
        { required: true, message: 'username is required', trigger: 'blur' }
    ],
    password: [
        { required: true, message: 'password is required', trigger: 'blur' },
        { type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
    ]
})
const handleSubmit = (valid:boolean, obj:SubmitInfoType) => {
    if(!valid) return proxy && proxy.$Message.error("验证失败!")
    // 登录
    if(obj.username !== 'admin')return proxy && proxy.$Message.error("账号错误!")
    if(obj.password !== 'admin')return proxy && proxy.$Message.error("密码错误!")
    let {redirect} = $route.query
    if(typeof redirect === 'string'){
        setToken("token")
        $router.replace(redirect)
    }else{
        $router.replace('/')
    }
}
// 自动登录
const autoLogin = toRef($store.userConfig, 'autoLogin')
// changeLanguage
const changeLanguage = (name:string)=>{
    if(proxy)proxy.$i18n.locale = name 
}
</script>


<style lang = 'scss' scoped>
.login {
    padding-top: 20px;
    .login-header{
        float: right;
        margin-right: 20px;
        padding: 0 30px;
    }
    .login-container {
        width: 384px;
        margin: 0 auto;
        .login-container-top {

            width: 100%;
            height: 100%;

            padding: 32px 0;

            .logo {
                display: flex;
                align-items: center;
                justify-content: center;

                img {
                    width: 80%;
                    height: 80%;
                }
            }

            p {
                text-align: center;
            }
        }

        .demo-auto-login {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 20px;
        }

        .other {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 24px;
            margin: 18px 0;

            .other-login {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 24px;
            }

            a {
                line-height: 24px;
            }

            svg {
                width: 24px;
                margin: 0 6px;
                height: 24px;
            }
        }

    }
}
</style>
